<template>
	<view>
		<!-- 顶部选项卡 -->
          <scroll-view scroll-x class="border-bottom scroll-row" style="height: 80rpx;">
          	<view class="scroll-row-item px-3" @click="jamie(index)" style="height: 80rpx; line-height: 80rpx;" 
			  v-for="(item,index) in tabBar" :key="index"  :class="tabIndex === index? 'main-text-color':''">
				<text class="font-md">
					{{item.name}}
				</text>
			</view>
          </scroll-view>
		  		  
          <swiper :current="tabIdenx" :style="'height:'+scrollH+'px;'">
          	<swiper-item v-for="(item,index) in tabBar" :key="index">
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'">
					<view v-for="i in 100 " :key="i">{{i}}</view>
				</scroll-view>
          	</swiper-item>
          </swiper>
		  
	</view>
</template>

<script>
	export default{
          data(){
			  return{
				  scrollH:500,//可视区域高度
				  tabIndex:0,
				  tabBar:[{
					  name:"推荐"
				  },{
					  name:"关注"
				  },{
					  name:"我注"
				  },{
					  name:"关注"
				  },{
					  name:"关注"
				  },{
					  name:"关注"
				  },{
					  name:"关注"
				  },{
					  name:"推荐"
				  }]
			  }
		  },
		  onLoad() {
		  	//获取可视区域高度
			uni.getSystemInfo({
				success: (res) => {
					this.scrollH = res.windowHeight -uni.upx2px(82)
				}
			})
		  },
		  methods:{
			  //切换选项卡的方法
			  jamie(index){
				  if (this.tabIndex === index){
					  return;
				  }
                    this.tabIndex = index			   
			  }
		  }
	}
	
</script>

<style>

</style>
